<template>
  <div>
    <ElTable :data="node.buttonList" :show-header="false">
      <ElTableColumn prop="buttonName" label="按钮名称">
        <template #default="scope">
          <ElLink @click="handleEditItem(scope.row)">
            <ElButton :type="scope.row.type" link>
              <template #icon>
                <Icon :icon="scope.row.icon"></Icon>
              </template>
              {{ scope.row.buttonName }}
            </ElButton>
          </ElLink>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="buttonType" label="按钮类型">
        <template #default="{ row }">
          <ElTag v-if="row.type" :type="row.type">{{ buttonTypeName(row.buttonType) }}</ElTag>
          <div v-else>{{ buttonTypeName(row.buttonType) }}</div>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="action" label="操作" width="70px">
        <template #default="{ row }">
          <ElButton text type="danger" @click="handleDelete(row)">
            <Icon icon="delete"></Icon>
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <div style="margin: 10px">
      <ElButton link type="primary" @click="handleNewItem">
        <Icon icon="plus"></Icon>
        <span>添加一项</span>
      </ElButton>
    </div>
    <Dialog ref="dialogRef" :title="title" @submit="handleSubmit">
      <Form ref="formRef" :schemas="schemas" label-width="80px"></Form>
    </Dialog>
  </div>
</template>

<script setup lang="tsx" name="ButtonPanel">
import { ref } from "vue";
import { ElTable, ElTableColumn, ElButton, ElLink, ElTag } from "element-plus";
import { Icon } from "@/components/Icon";
import { Dialog, useDialog } from "@/components/Dialog";
import { Form, useForm } from "@/components/Form";
import { generateId, deepClone } from "../../../util/common";
import { SchemaProps } from "@/components/Form/type";
const title = ref();
const dialogRef = ref();
const dialog = useDialog(dialogRef);
const formRef = ref();
const form = useForm(formRef);
const prop = defineProps({
  node: {
    type: Object
  }
});
const handleDelete = row => {
  const buttonList = prop.node!.buttonList;
  for (let index = 0; index < buttonList.length; index++) {
    if (buttonList[index].id === row.id) {
      buttonList.splice(index, 1);
      break;
    }
  }
};
const handleNewItem = () => {
  title.value = "新增按钮";
  dialog.open(0);
  form.resetFields();
};
const handleEditItem = async row => {
  title.value = "编辑按钮";
  await dialog.open(1);
  await form.updateFields(row);
};
const handleSubmit = async flag => {
  const fields = await form.validateFields();
  const buttonList = prop.node!.buttonList;
  if (flag) {
    for (let i = 0; i < buttonList.length; i++) {
      if (buttonList[i].id === fields.id) {
        buttonList[i] = deepClone(fields);
        break;
      }
    }
  } else {
    fields.id = "button" + generateId();
    buttonList.push(deepClone(fields));
  }
  dialog.close();
};
const buttonTypes = [
  { label: "拒绝", value: "reject" },
  { label: "提交", value: "submit" }
];
const buttonTypeName = value => {
  if (value) {
    for (const buttonType of buttonTypes) {
      if (buttonType.value === value) {
        return buttonType.label;
      }
    }
  }
};
const schemas: SchemaProps[] = [
  {
    field: "buttonType",
    label: "按钮类型",
    required: true,
    el: "select",
    elProps: {
      options: buttonTypes
    }
  },
  {
    field: "buttonName",
    label: "按钮名称",
    required: true
  },
  {
    field: "type",
    label: "样式类型",
    el: "select",
    elProps: {
      options: [
        { label: "primary", value: "primary" },
        { label: "success", value: "success" },
        { label: "warning", value: "warning" },
        { label: "danger", value: "danger" },
        { label: "info", value: "info" }
      ]
    }
  },
  {
    field: "icon",
    label: "样式图标",
    el: "icon-picker"
  }
];
</script>

<style scoped></style>
